<div class="login-wrapper background">
    <form class="login" #loginForm="ngForm">
        <section class="title">
            <h3 class="welcome">{{'APP_LOGIN_TITLE_WELCOME'|translate}}</h3>
            <span *ngIf="!theme||!theme.systemName">
                {{'APP_LOGIN_TITLE_KO'|translate}}
            </span>
            <span *ngIf="theme&&theme.systemName">
                {{theme.systemName}}
            </span>
        </section>
        <div class="login-group">
            <clr-input-container>
                <label class="clr-sr-only">{{'APP_USERNAME'|translate}}</label>
                <input type="text" name="username" clrInput placeholder="Username"
                       [(ngModel)]="loginCredential.username"
                       required/>
            </clr-input-container>
            <clr-input-container>
                <label class="clr-sr-only">{{'APP_PASSWORD'|translate}}</label>
                <input type="password" name="password" clrInput placeholder="Password"
                       [(ngModel)]="loginCredential.password" required autocomplete/>
            </clr-input-container>
            <div>
                <img width="120" src="{{captcha.image}}" (click)="createCaptcha()" *ngIf="hasCode">
                <clr-input-container *ngIf="hasCode" style="width: 120px;">
                    <input type="text" size="20" name="code" clrInput [(ngModel)]="loginCredential.code"
                           required/>
                </clr-input-container>
            </div>
            <div *ngIf="isError" class="error active">
                {{message}}
            </div>
            <app-modal-alert></app-modal-alert>
            <button type="submit" class="btn btn-primary" (click)="login()"
                    [disabled]="loginForm.invalid">{{'APP_LOGIN'|translate}}</button>
            <div>
                <br>
                <a style="position: absolute;right: 12%" (click)="forgotPassword()"
                   class="more-info-link">{{ '忘记密码' | translate }}</a>
            </div>
        </div>
    </form>
</div>
<app-forgot-password></app-forgot-password>